<template>
  <div>
    <!-- 弹窗 -->
    <el-dialog v-model="state.dialogVisible" title="选择图片" :append-to-body="true" :draggable="true">
      <template #default>
        <div class="material">
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="material__left">
                <div class="category">
                  <div
                    class="item"
                    :class="{ active: state.selectedGroup == '' }"
                    @click="handleGroupSelect('')"
                  >
                    <img :src="state.dool" alt="" />全部
                  </div>
                  <div
                    class="item"
                    :class="{ active: state.selectedGroup == '0' }"
                    @click="handleGroupSelect('0')"
                  >
                    <img :src="state.dool" alt="" />未分组
                  </div>
                  <div
                    class="item"
                    :class="{ active: state.selectedGroup == item.id }"
                    @click="handleGroupSelect(item.id)"
                    v-for="(item, index) in state.group"
                    :key="index"
                  >
                    <img :src="state.dool" alt="" />{{ item.name }}
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="18">
              <div class="botton-group">
                <el-upload
                  v-model:file-list="state.uploadFileList"
                  class="upload-demo"
                  :show-file-list="false"
                  :http-request="uploadRequest"
                  :auto-upload="true"
                  multiple
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  :limit="props.list"
                  :on-exceed="handleExceed"
                >
                  <el-button type="success">上传图片</el-button>
                  
                </el-upload>
                 <el-button @click="state.dialogVisible = false" style="margin-left:12px">取消</el-button>
                 <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
              </div>

              <div class="material__right">
                <el-scrollbar height="400px">
                  <div class="file-list">
                    <div
                      class="item"
                      v-for="(item, index) in pager.lists"
                      :key="index"
                    >
                      <div
                        class="hover-option"
                        v-on:mouseover="handlerMouseover"
                      >
                        <div></div>
                        <div>
                          <el-dropdown @command="handleCommand">
                            <div>
                              <el-icon><MoreFilled /></el-icon>
                            </div>
                            <template #dropdown>
                              <el-dropdown-menu>
                                <!-- <el-dropdown-item>重命名</el-dropdown-item> -->
                                <el-dropdown-item @click="handleDelete(item.id)">删除</el-dropdown-item>
                              </el-dropdown-menu>
                            </template>
                          </el-dropdown>
                        </div>
                      </div>
                      <div
                        class="img-box"
                        @click.stop="handelSelectImage(index)"
                      >
                        <el-image
                          :key="getImageUrl(item.url)"
                          :src="getImageUrl(item.uri)"
                          fit="contain"
                          lazy
                        />
                        <div class="selected-mask" v-if="isSelect(item.id)">
                          <el-icon size="30" color="#fff"><Select /></el-icon>
                        </div>
                      </div>
                      <div class="file-name">{{ item.filename }}</div>
                      
                    </div>
                  </div>
                </el-scrollbar>
                <div class="flex justify-end m-t-15">
                  <la-pagination
                    v-model="pager"
                    @change="getLists"
                    layout="total,prev, next,jumper"
                  />
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </template>
      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button @click="state.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirm"> 确定 </el-button>
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>
<script setup>
import api from "@/lnk/admin/api/index.js";
import { reactive } from "vue";
import { usePaging } from "@/lnk/hooks/usePaging";
import appStore from "@/lnk/admin/store/app";
import feedback from '@/lnk/utils/feedback'
import { ITEM_RENDER_EVT } from "element-plus/es/components/virtual-list/src/defaults";
const emit = defineEmits(["confirm"]);

const props = defineProps({
  // 限制数量
  limit: {
    type: [Number, String],
    default: 9,
  },
});

const queryParams = reactive({});

const state = reactive({
  value: [],
  dialogVisible: false,
  uploadFileList: [],
  fileList: [],
  checkList: [],
  group: [],
  selectedGroup: "",
  selected: [],
  dool: "",
});

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: api.file.list,
  params: queryParams,
});

const open = () => {
  getGroup();
  getLists();
  state.selected = [];
  state.dialogVisible = true;
};

const getGroup = async () => {
  const res = await api.fileGroup.list();
  state.group = res.data;
};

// 选择分组
const handleGroupSelect = (id) => {
  state.selectedGroup = id;
  queryParams.group_id = id;
  getLists();
};

const isSelect = (id) => {
  const index = state.selected.findIndex((item) => {
    return item.id == id;
  });

  return index != -1 ? true : false;
};

/**
 * 获取图片完整地址
 * @param {*} uri
 */
 const getImageUrl = (uri) => {
  let oss_domain = appStore.state.config.oss_domain;

  return uri ? `${oss_domain}${uri}` : "";
};

// 上传图片
const uploadRequest = async (file) => {
  const group_id = state.selectedGroup;
  const res = await api.upload.image({ file: file.file, group_id });
  getLists();
};

// 删除图片
const handleDelete = async (id)=>{
    await feedback.confirm('确定要删除？')
    await api.file.delete({id});
    getLists();
};

// 选中或者取消图片
const handelSelectImage = async (index) => {
  const item = pager.lists[index];
  console.log(props);
  const findex = state.selected.findIndex((t) => {
    return t.id == item.id;
  });
  if (findex != -1) {
    state.selected.splice(findex, 1);
  } else {
    if (props.limit > state.selected.length) {
      state.selected.push(item);
    }
    if (props.limit == 1) {
      state.selected = [];
      state.selected.push(item);
    }
  }
  
};

// 确定
const handleConfirm = () => {
  
  emit("confirm", state.selected);
  state.dialogVisible = false;
};

const handleCommand = () => {};

defineExpose({
  open,
});
</script>


<style lang="scss" scoped>
.material {
  &__left {
    border-right: 1px solid var(--el-border-color);
    height: 100%;
    .category {
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      .item {
        display: flex;
        align-items: center;
        margin: 0 10px 10px 10px;
        padding:10px;
        border-radius: 8px;
        img {
          width: 20px;
          height: 20px;
          margin-right: 15px;
        }
        &.active {
          background: var(--el-color-info-light-9);
        }
      }
    }
  }

  .botton-group{
    display: flex;
  }

  &__right {
    // padding: 0 15px;
    .file-list {
      display: flex;
      flex-wrap: wrap;

      .item {
        overflow: hidden;
        width: 100px;
        margin: 0 10px 10px 0;

        .img-box {
          position: relative;
          border-radius: 8px;
          overflow: hidden;
          width: 100px;
          height: 100px;
          background: var(--el-fill-color-light);
          /* text-align: center; */
          display: flex;
          justify-content: center;
          align-items: center;
          .img {
            width: 100%;
            height: 100%;
          }
          .selected-mask {
            position: absolute; /* 设置绝对定位 */
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0.5); /* 设置遮罩层颜色和透明度 */
            opacity: 1; /* 初始透明度为0（即不可见） */
            transition: opacity 0.3s ease-out; /* 设置过渡效果 */
            z-index: 1; /* 设置遮罩层比图片层级高 */
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .file-name {
          font-size: 10px;
          overflow: hidden; //超出的文本隐藏
          text-overflow: ellipsis; //溢出用省略号显示
          white-space: nowrap;
        }
        .hover-option {
          font-size: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }

  .material__right{
    margin: 10px 0;
  }
}
</style>
    
    
    
    